import { View, Search, Image, Popup } from '@hips/taro-ui'
import { Input } from '@tarojs/components'
import selectedIcon from 'assets/icons/tent-selected.png'
import SearchIcon from 'assets/icons/search-o.svg'
import ClearIcon from 'assets/icons/clear.png'
import Styles from './search-popup.module.less'
import { navigateTo } from '@tarojs/taro'
export default {
  name: 'SearchPopup',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    funcList: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    value(newVal) {
      this.showModel = newVal
    },
    showModel(newVal) {
      if (newVal) {
        setTimeout(() => {
          this.$refs.input.focus()
        }, 100)
      }
      this.$emit('input', newVal)
      this.clear()
    }
  },
  data() {
    return {
      searchValue: '',
      showModel: false
    }
  },
  methods: {
    changeInput(e) {
      const value = e.detail.value
      this.searchValue = value
    },
    goFunc(data) {
      console.log('跳转到对应应用')
      // navigateTo({
      //   url: `/pages/${data.name}/index`
      // })
      this.showModel = false
    },
    clear() {
      this.searchValue = ''
    }
  },
  render() {
    const funcFilterList = this.funcList.filter(i => {
      return i.name.includes(this.searchValue) && this.searchValue
    })
    return (
      <Popup vModel={this.showModel} position={'top'}>
        <View class={Styles['search-popup']}>
          <View class={Styles['search-popup-header']}>
            <View class={Styles['search-popup-header-search']}>
              <Image
                class={Styles['search-popup-header-search-icon']}
                src={SearchIcon}
              ></Image>
              <Input
                ref="input"
                class={Styles['search-popup-header-search-input']}
                value={this.searchValue}
                onInput={this.changeInput}
              ></Input>
              <View
                onTap={this.clear}
                class={Styles['search-popup-header-search-clear']}
              >
                <Image
                  src={ClearIcon}
                  class={Styles['search-popup-header-search-clear-icon']}
                ></Image>
              </View>
            </View>
            <View
              class={Styles['search-popup-header-cancel']}
              onTap={() => {
                this.showModel = false
              }}
            >
              取消
            </View>
          </View>
          <View class={Styles['search-popup-box']}>
            {funcFilterList.map(item => {
              let replaceContent = (
                <View
                  class={
                    Styles['search-popup-box-item-funcName-highLight-high']
                  }
                >
                  {this.searchValue}
                </View>
              )
              const funcName = () => {
                const startIndex = item.name.indexOf(this.searchValue)
                const searchValue = this.searchValue
                if (startIndex === -1) return item.name
                const beforeStr = item.name.substring(0, startIndex)
                const afterStr = item.name.substring(
                  startIndex + searchValue.length
                )
                return (
                  <View
                    class={Styles['search-popup-box-item-funcName-highLight']}
                  >
                    {beforeStr}
                    {replaceContent}
                    {afterStr}
                  </View>
                )
              }
              return (
                <View
                  class={Styles['search-popup-box-item']}
                  onTap={() => this.goFunc(item)}
                >
                  <Image
                    src={item.funcUrl || selectedIcon}
                    class={Styles['search-popup-box-item-icon']}
                  ></Image>
                  <View class={Styles['search-popup-box-item-funcName']}>
                    {funcName()}
                  </View>
                </View>
              )
            })}
          </View>
        </View>
      </Popup>
    )
  }
}
